<template>
  <view>
    <u-navbar title="报修列表" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view class="pt-30">
      <view v-if="fixList.length>0" class="m-lr-20 oh">
        <u-radio-group :value="connectParams.repairWorkOrderId" active-color="#19BE6B" size="50" @change="connectParams.repairWorkOrderId = $event">
          <view v-for="item in fixList" :key="item.workOrderId">
            <u-radio shape="circle" :name="item.workOrderId">
              <view class="mb-30 pl-20 p-tb-12 flex1 flex align-center justify-between bg-E9F8FF br-10 oh"
                @tap="clickItem(item)">
                <view class="flex flex-column oh flex1 max-w-470 fz-28">
                  <text class="fz-40 font-bold lh-56 mt-12 break-all text-ellipsis">{{ item.deviceName || '-' }}</text>
                  <text class="lh-40 mt-20 text-ellipsis" v-if="!isShowField(item.status)">
                    维修工程师: {{ item.repairStaff || '-' }}
                  </text>
                  <text class="lh-40 mt-20 text-ellipsis" v-if="isShowField(item.status)">
                    报修人: {{ item.initiator || '-' }}
                  </text>
                  <text class="flex mt-20 lh-40">
                    报修时间：{{ item.createTime }}
                  </text>
                  <view class="mt-20"
                    v-if="!isShowField(item.status) && item.status !== REP_WORK_ORDER_STATUS.REJECTED.value">
                    维修开始时间：{{ item.startTime }}
                  </view>
                  <view class="flex mt-20" v-if="item.status === REP_WORK_ORDER_STATUS.DONE.value">
                    维修结束时间：{{ item.endTime }}
                  </view>
                </view>

                <view class="relative mr-20">
                  <CustomCircleProgress :border-width="8" :size="128" :percent="getOrderPercentage(item.status)"
                    :active-color="getOrderStatusColor(item.status)">
                    <view class="h-full w-full lh-center" :style="{ 'color': getOrderStatusColor(item.status) }">
                      <text class="fz-30">{{ getStatusName(item.status) }}</text>
                    </view>
                  </CustomCircleProgress>
                </view>
              </view>
            </u-radio>
          </view>
        </u-radio-group>
      </view>
      <view class="pb-146" v-else>
        <empty-icon></empty-icon>
      </view>
    </view>

    <view class="min-h-216 sticky bottom-0 bg-fff z-99">
      <view @tap="addRepairOrder" class="ml-20 pt-20">
        <u-icon name="plus" size="32" color="#1582F5"></u-icon>
        <text class="color-1582F5 fz-30 pl-7">新增报修</text>
      </view>
      <view class="flex align-center justify-end pr-50 mt-20">
        <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center" @tap="back">
          <text>取消</text>
        </view>
        <view class="flex ml-50">
          <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center"
            :class="isAllowDispatch ? 'allowDispatch' : 'disAllowDispatch'" @tap="connectOrder">
            <text>关联</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交数据load -->
    <u-mask :show="isShowMask" :mask-click-able="false">
      <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
        <text>关联中...</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-mask>

  </view>
</template>

<script>
import CustomCircleProgress from '../tabbar/components/CustomCircleProgress'
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";

import { REP_WORK_ORDER_STATUS } from '@/utils/dict'
import { getRepairOrder } from "@/api/repair/workOrder";
import { batchRelevancy } from '@/api/inspection/abnormal'

export default {
  name: "ConnectRepair",
  components: { EmptyIcon, CustomCircleProgress },
  onLoad (options) {
    if (options.abnormalId) {
      this.connectParams.abnormalId = options.abnormalId
    }
    if (options.hospitalId) {
      this.queryParams.hospitalId = options.hospitalId
    }
    this.init()
  },
  data () {
    return {
      isShowMask:false,
      hasNext: false,
      fixList: [],
      loading: true,
      queryParams:{
        hospitalId: '',
        pageNum: 1,
        pageSize:10
      },
      connectParams:{
        repairWorkOrderId: '',
        abnormalId: '',
      }
    }
  },
  computed: {
    REP_WORK_ORDER_STATUS () { return REP_WORK_ORDER_STATUS },
    workOrderStatusList () {
      return [
        REP_WORK_ORDER_STATUS.TO_ACCEPT,
        REP_WORK_ORDER_STATUS.TO_REPAIR,
        REP_WORK_ORDER_STATUS.SEEK_HELP,
        REP_WORK_ORDER_STATUS.DO_REPAIR,
        REP_WORK_ORDER_STATUS.SUSPEND
      ]
    },
    statusList () { return this.workOrderStatusList.map(e => e.value).join(",") },
    isAllowDispatch () {
      if (this.connectParams.repairWorkOrderId) return true
      return false
    }
  },
  onReachBottom(){
    if (!this.loading && this.hasNext) {
      this.getNextList()
    }
  },
  methods: {
    init(){
      this.loading = true
      const params = {
        ...this.queryParams,
        statusList: this.statusList,
      }
      getRepairOrder(params).then(res => {
        this.hasNext = res.hasNext
        this.fixList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    getNextList() {
      if(this.hasNext){
        this.loading = true
        const params = {
          ...this.queryParams,
          pageNum : this.queryParams.pageNum +1,
          statusList: this.statusList,
        }
        getRepairOrder(params).then(res => {
          this.queryParams.pageNum++
          this.hasNext = res.hasNext
          this.fixList.push(...res.rows)
        }).finally(()=>this.loading = false)
      }
    },
    //关联
    connectOrder(){
      if (this.isAllowDispatch) {
        this.isShowMask = true
        return batchRelevancy([this.connectParams]).then(res => {
          this.isShowMask = false
          uni.showToast({
            'title': '关联成功！'
          })
          setTimeout(()=>{
            uni.navigateBack({
              delta:2
            })
          },1400)
        }).catch(() => {
          this.isShowMask = false
        })
      }
    },
    back(){
      uni.navigateBack({
        delta: 1
      });
    },
    addRepairOrder(){
      uni.navigateTo({ url: '/pages/repair/start-repair-work-order' })
    },
    clickItem(item){
      item.checked = !item.checked
    },
    //不同工单展示的数据字段
    isShowField (status) {
      if (status === REP_WORK_ORDER_STATUS.TO_ACCEPT.value || status === REP_WORK_ORDER_STATUS.TO_ACCEPT.REJECTED) return true;
      return false
    },

    //百分比-UI
    getOrderPercentage(status){
      if (!status) return 0
      switch (status) {
        case this.workOrderStatusList[0].value: return 0
        case this.workOrderStatusList[1].value: return 0
        case this.workOrderStatusList[2].value: return 50
        case this.workOrderStatusList[3].value: return 70
        default: return 100
      }
    },
    //状态显示颜色
    getOrderStatusColor(status){
      switch (status) {
        case this.workOrderStatusList[0].value: return ''
        case this.workOrderStatusList[1].value: return ''
        case this.workOrderStatusList[2].value: return '#FF6262'
        case this.workOrderStatusList[3].value: return '#2d8df2'
        case this.workOrderStatusList[4].value: return '#FF9900'
        default: return ''
      }
    },
    //状态-标签
    getStatusName(status){
      const result = this.workOrderStatusList.find(item => item.value === status)
      return result ? result.label : ''
    },
    timeFormat (date, time) {
      if (!date || !time) {
        return '-'
      }
      return date + ' ' + time.split(':')[0] + ":" + time.split(':')[1]
    }
  }
}
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/ .u-radio__label {
  flex: 1 !important;
  margin-right: 0;
}

/deep/ .u-radio {
  display: flex;
  line-height: 1;
}

/deep/ .u-radio-group {
  display: block;
}

.allowDispatch {
  border: 2rpx solid #2d8cf0;
  background: #2d8cf0;
}

.disAllowDispatch {
  border: 2rpx solid #2d8cf050;
  background: #2d8cf050;
}

.color-1582F5 {
  color: #1582F5
}
</style>
